<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>门店修改</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item layui-inline layui-hide">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="addrid" placeholder="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">所在省</label>
                <div class="layui-input-inline">
                    <select name="prov" id="prov" lay-filter="prov" lay-verify="required">
                        <option value="">请选择所在省</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所在市</label>
                <div class="layui-input-inline">
                    <select name="cit" id="cit" lay-filter="cit" lay-verify="required">
                        <option value="">请选择所在市</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="detailaddr" placeholder="" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">门店名</label>
                <div class="layui-input-inline">
                    <input type="text" name="sname" placeholder="" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">联系方式</label>
                <div class="layui-input-inline">
                    <input type="text" name="contact" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">门店图片</label>
                <div class="layui-input-block">
                    <input type="text"   name="coverimg" lay-verify="idcardpic" autocomplete="off" placeholder="照片" id="idcardpic"
                           class="layui-input">
                    <input class="btn-upload file-up" style="display: inline-block;" type="file" accept="image/*"  name="edit" id="edit" value="上传">
                </div>
                <div class="layui-input-block">
                    <img id="preview" height="200px" width="300px" src="#" alt="没有选择"/>
                    <span id="demoText"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    layui.use(['form', 'jquery', 'upload'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        var upload = layui.upload;
        var id = sessionStorage.getItem("id")


        $.ajaxSetup({
            headers: {
                'Authorization': window.sessionStorage.getItem("token")
            }
        })



        // 二级联动 第一步 渲染父级
        let j1=$.ajax({
            url: window.BASEPATH +'city/selectById/0',	// 后台取到所有的city省的名字
            dataType: 'json',
            type: 'get',
            success: function (resData) {

                $.each(resData.data, function (index, value) {
                    // 这里的 value.roomName
                    // 前者是页面显示的值，后者是传递给后台的值。
                    // 正常情况下，后者应该是 value.id
                    $('#prov').append(new Option(value.name, value.id));	// 下拉菜单里添加元素
                });

                //渲染select
                form.render('select');

                // 默认选中第一个选项
                // var firstValue = resData.data[0].id; // 假设第一个选项的id为获取的id属性或者其他标识
                // $('#room').val(firstValue);
                // form.render('select');
            }
        });

        layui.event('form', 'select(prov)', {
            elem: $('#prov'),
            value: 'select'
        });

        // let j3=j1.then(function(){
        form.on('select(prov)', function(data){

            var provName =$('#prov').val();// data.value;
           // alert("????????????"+provName);

            $.ajax({
                url: window.BASEPATH +'city/selectById/'+provName,
                dataType: 'json',
                type: 'get',
                success: function (resData) {

                    // 清空cit
                    $('#cit').empty();

                    $.each(resData.data, function (index, value) {

                        // 前者是页面显示的值，后者是传递给后台的值。
                        $('#cit').append(new Option(value.name, value.id));// 下拉菜单里添加元素
                    });

                    //渲染select
                    form.render('select');
                }
            });
        });
        // });


        // 先运行拿到id
        j1.then(function(){
         $.getJSON(window.BASEPATH + "shop/selectShopById/" + id,
            function (res) {
                if (res.code != 0)
                    return layer.msg('信息检索失败');
                let data = res.data;

                console.log(data.addrCity.id)
                // if (data.addrCity.parentid===0){
                //     $("[name='prov']").val(data.addrCity.id);
                // }else {
                //     $("[name='prov']").val(data.addrCity.parentid);
                //     $("[name='cit']").val(data.addrCity.id);
                // }
                //console.log("843-2o80-342588-======="+$("[name='cit']").val())
                $("[name='prov']").val(data.addrCity.parentid);
                //$("[name='cit']").val(data.addrCity.id);

                $("[name='addrid']").val(data.addrid);
                $("[name='detailaddr']").val(data.detailaddr);
                $("[name='sname']").val(data.sname);
                $("[name='contact']").val(data.contact);
                $("[name='coverimg']").val(data.coverimg);
                ////



                    /////
                let j2=  $.ajax({
                    url: window.BASEPATH +'city/selectById/'+data.addrCity.parentid,
                    dataType: 'json',
                    type: 'get',
                    success: function (resData) {

                        // 清空cit
                        $('#cit').empty();

                        $.each(resData.data, function (index, value) {

                            // 前者是页面显示的值，后者是传递给后台的值。
                            $('#cit').append(new Option(value.name, value.id));// 下拉菜单里添加元素
                        });

                        //渲染select
                        form.render('select');
                    }
                });

                j2.then(function(){
                    $("[name='cit']").val(data.addrCity.id);
                    form.render('select');
                });

                if(data.coverimg!="")
                {
                    if(data.coverimg.indexOf("http")!=-1)
                        $('#preview').attr('src', data.coverimg);
                    else
                     $('#preview').attr('src', window.BASEPATH+data.coverimg);
                }
                ////
                form.render();
            });
        });


        form.on('submit(user-save)', function (data) {
            var provValue = $('#prov').val();
            var citValue = $('#cit').val();
            if (citValue==null){
                data.field.addrid=provValue;
            }else {
                data.field.addrid = citValue;
            }

            data.field.id = id;// 修改的id
            $.ajax({
                url: window.BASEPATH + 'shop/edit',
                data: data.field,
                type: 'post',
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                            parent.layui.table.reload("user-table");
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
            return false;
        });



        upload.render({
            elem: '#edit'
            ,url: window.BASEPATH+'upload2' //改成您自己的上传接口
            ,auto: true  //选择文件后不自动上传
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#preview').attr('src', result); //图片链接（base64）
                });
            }
            ,before: function(obj){
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                $("#idcardpic").val(res.data);
                //上传成功的一些操作
                layer.msg("信息上传成功！",{time: 3000});
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

    })
</script>
</body>
</html>
